<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 剩余参数：es5之前 函数内部的形参<函数的实际参数 会报错  剩余参数是将剩余的元素放到一个数组中
        /*         function fn(a, b, c) {
                    console.log(a);
                    console.log(b);
                    console.log(c);
                    console.log(d);
                }

                fn(1, 2, 3); */

        // ...形参 可以解决上述问题 加了...args之后 不能加其他函数 不然会报错
        function fn(...args) {
            console.log(args[0]);
            console.log(args[1]);
            console.log(args[2]);
        }
        fn(1, 2);
        fn(1, 3, 2, 4)

        // 应用：数组求和
        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item); // 注意 forEach里面的代码，写得 很精简
            return total;
        };
        console.log(sum(10, 20, 30));


        //扩展运算符是将数组或者对象拆分成逗号分隔的参数序列 和剩余参数相反
        const arr = [10, 20, 30]
        //`...arr`则表示`10, 20, 30`这样的序列。 console.log把,当成分隔符
        console.log(...arr);

        // 应用：拷贝数组
        let arr2 = [1, 3, 4, 5, 5]
        // let arr3 = arr2 这种不是拷贝 是改地址值指向
        let arr3 = [...arr2] //真正的拷贝 开辟了一块新的内存空间
        console.log('arr3',arr3);

        // 合并数组
        let arr4 = [2];
        let arr5=[3]
        let arr6  = [...arr4,...arr5]
        console.log('arr6',arr6);

        
    </script>
</body>

</html>